<template>
    <div class="modify" v-title data-title="数据修改">
        <headerTop title="数据修改"></headerTop>

        <div class="modify-item">
            <span class="modify-title">统计日期</span>
            <span class="modify-input" @click="selectDateTime"
                  :style="{color:selectTime?'#323233':'#969799'}">{{selectTime?selectTime:'请选择查找的统计日期'}}</span>
        </div>
        <div class="line"></div>
        <div class="modify-item">
            <span class="modify-title">姓名</span>
            <van-field v-model="searchName" maxlength="12" type="text" placeholder="请输入查找的姓名"
            />
        </div>
        <div class="line"></div>
        <div class="modify-item">
            <span class="modify-title">项目编号</span>
            <van-field v-model="searchProjectCode" maxlength="20" type="text" placeholder="请输入查找的项目编号"
            />
        </div>

        <div class="person-commit">
            <van-button round type="info" style="width: 100%;font-size: 18px;"
                        @click="startSearch">查找
            </van-button>
        </div>

        <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                :error.sync="error"
                error-text="请求失败，点击重新加载"
                :immediate-check="false"
                @load="onLoad">

            <div class="modify-content" v-for="(item,index) in list" :key="index" @click="goDetail(item.id)">
                <span class="modify-title">{{item.projectName}}</span>
                <div class="modify-time">
                    <span style="width: 150px">{{"编号："+item.projectNum}}</span>
                    <span style="margin-left: 30px">{{"日期："+item.reportDate}}</span>
                </div>
            </div>
        </van-list>

        <van-popup v-model="isShowTimePopu" position="bottom" round>
            <van-datetime-picker
                    v-model="currentDate"
                    type="datetime"
                    title="选择年月日"
                    :min-date="minDate"
                    :max-date="maxDate"
                    @confirm="commitDate"
                    @cancel="isShowTimePopu=false"
            />
        </van-popup>
    </div>
</template>

<script>
    import headerTop from "@/components/headerTop";
    import {dismissLoading, showLoading} from "@/utils/notify";

    export default {
        name: "sysModifyData",
        components: {
            headerTop
        },
        data() {
            return {
                isShowTimePopu: false,
                searchName: '',
                searchProjectCode: '',
                loading: false,
                finished: false,
                allPage: 0,
                pageSize: 20,
                pageNum: 0,
                currentType: 'book',
                list: [],
                error: false,
                isRefrsh: false,
                minDate: new Date(2000, 0, 1),
                maxDate: new Date(2025, 10, 1),
                currentDate: new Date(),
                selectTime: ''
            }
        },
        methods: {
            selectDateTime() {
                this.isShowTimePopu = true
            },
            startSearch() {
                this.onLoad()
            },
            commitDate(e) {
                let date = new Date(e)
                this.selectTime = date.getFullYear() + '-' + this.p((date.getMonth() + 1)) + '-' + this.p(date.getDate())
                this.isShowTimePopu = false
            },
            p(s) {
                return s < 10 ? '0' + s : s
            },
            goDetail(id) {
                if (this.currentType == 'book') {
                    this.$router.push({
                        name: 'officeFillmodify',
                        query: {
                            projectId: id
                        }
                    })
                } else if (this.currentType == 'hr') {
                    this.$router.push({
                        name: 'personFillmodify',
                        query: {
                            projectId: id
                        }
                    })
                } else if (this.currentType == 'project') {
                    this.$router.push({
                        name: 'projectFillmodify',
                        query: {
                            projectId: id
                        }
                    })
                }
            },
            onLoad() {
                if (!this.isRefrsh) {
                    this.pageNum++;
                    this.getmodifyList()
                }
                this.isRefrsh = false
            },
            getmodifyList() {
                showLoading("获取中...")
                let params = {
                    pageSize: this.pageSize,
                    pageNum: this.pageNum,
                    type: this.currentType
                }
                let callBack = (res) => {
                    this.error = false
                    this.allPage = res.paginator.pages
                    res.list.forEach((item) => {
                        this.list.push(item)
                    })
                    this.loading = false;

                    if (this.pageNum >= this.allPage) {
                        this.finished = true;
                    }
                    this.isRefrsh = false
                    dismissLoading()
                }
                let errback = () => {
                    this.loading = false;
                    this.error = true
                    this.pageNum = this.pageNum - 1
                    dismissLoading()
                }
                this.$request('POST', "/api/mobile/report/list", params, callBack, this, errback)
            }
        }
    }
</script>

<style scoped lang="scss">
    .modify {
        min-height: 100vh;
        background: $page-bg;
        padding-top: 56px;
        box-sizing: border-box;

        .modify-item {
            width: 100%;
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            padding: 0 12px;
            box-sizing: border-box;
            background: white;
            height: 50px;

            .modify-title {
                width: 80px;
                height: 100%;
                line-height: 50px;
                color: #323233;
                font-size: 15px;
                flex-shrink: 0;
            }

            .modify-input {
                flex: 1;
                font-size: 16px;
                line-height: 50px;
            }
        }

        .modify-content {
            background: white;
            padding: 14px 12px;
            margin-bottom: 5px;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-direction: column;

            .modify-title {
                font-size: 16px;
                color: #323233;
            }

            .modify-time {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                margin-top: 10px;
                font-size: 13px;
                color: #969799;
            }

        }

        .line {
            width: 100%;
            height: 1px;
            background: #ebedf0;
            opacity: .5;
        }

        .person-commit {
            width: 90%;
            height: 40px;
            margin: 20px auto 30px;
            border-radius: 45px;
            font-size: 18px;
            text-align: center;
            line-height: 45px;
            color: #ffffff;
        }
    }

</style>
<style>
    .van-picker__confirm {
        color: #007CF9;
        font-size: 17px;
    }
</style>